<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <Detail title="总销售额" num="12560">
          <template #charts>
            <span> 周同比 55.67%</span>
            <svg t="1642562806086" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3074" width="16" height="16"><path d="M868 545.5L536.1 163c-12.7-14.7-35.5-14.7-48.3 0L156 545.5c-4.5 5.2-0.8 13.2 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z" p-id="3075" fill="#d8aefb" /></svg>
            <span>日同比 19.96%</span>
            <svg t="1642562926547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4434" width="16" height="16"><path d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861c12.7 14.7 35.5 14.7 48.3 0L868 478.5c4.5-5.2 0.8-13.2-6-13.2z" p-id="4435" fill="#3f4a35" /></svg>
          </template>
          <template slot="footer">
            <span>日销售额￥ 12423</span>
          </template>
        </Detail>
      </el-col>
      <el-col :span="6">
        <Detail title="访问量" num="88460">
          <template slot="footer">
            <span>日访问量 1234</span>
          </template>
          <template slot="charts">
            <lineCharts />
          </template>
        </Detail>
      </el-col>
      <el-col :span="6">
        <Detail title="支付笔数" num="88460">
          <template slot="footer">
            转换率64%
          </template>
          <template slot="charts">
            <barCharts />
          </template>
        </Detail>
      </el-col>
      <el-col :span="6">
        <Detail title="运营活动效果" num="78%">
          <template slot="footer">
            <span> 周同比 55.67%</span>
            <svg t="1642562806086" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3074" width="16" height="16"><path d="M868 545.5L536.1 163c-12.7-14.7-35.5-14.7-48.3 0L156 545.5c-4.5 5.2-0.8 13.2 6 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z" p-id="3075" fill="#d8aefb" /></svg>
            <span>日同比 19.96%</span>
            <svg t="1642562926547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4434" width="16" height="16"><path d="M862 465.3h-81c-4.6 0-9 2-12.1 5.5L550 723.1V160c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v563.1L255.1 470.8c-3-3.5-7.4-5.5-12.1-5.5h-81c-6.8 0-10.5 8.1-6 13.2L487.9 861c12.7 14.7 35.5 14.7 48.3 0L868 478.5c4.5-5.2 0.8-13.2-6-13.2z" p-id="4435" fill="#3f4a35" /></svg>

          </template>
          <template slot="charts">
            <progressCharts />
          </template>
        </Detail>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import Detail from './detail'
import lineCharts from './lineCharts'
import barCharts from './barCharts'
import progressCharts from './progressCharts'
export default {
  components: {
    Detail,
    lineCharts,
    barCharts,
    progressCharts
  }
}
</script>

<style scoped>

</style>
